<template>
  <div>
    <div v-if="alertType==1">
      <div class="details">
        <text class="text2">请骑至
          <text class="blue">还车区域</text>
          内还车
        </text>
        <br>
        <text class="text2 text3">否则会产生车辆调度费</text>
      </div>
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/img_jxq.jpg" class="img5"/>
      <div class="view">
        <div class="flex1 qu1">
          <text class="xh">续航</text>

          <br>
          <text class="km"> {{bikeDetails.extensionMileage}}km</text>
          <div v-if="bikeDetails.batteryLevel > 30">
            <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/dianliang_100.png" class="img4"/>
            <text class="status">电量充沛</text>
          </div>
          <div v-else>
            <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/dianliang_20.png" class="img4"/>
            <text class="status" style="color: #FF4E57;">电量偏低，动力有所下降</text>
          </div>
          <button class="btn pass open" @click="makeOrder()">开锁启动</button>
        </div>

      </div>

    </div>
    <div v-else-if="alertType==2">
      <div class="details">
        <text class="text2">骑至
          <text class="blue">还车区域</text>
          内还车半价
        </text>
        <br>
        <text class="text2 text3">还车区域外还车会产生调度费</text>
      </div>
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/img1.png" class="img5"/>
      <div class="view">
        <div class="flex1 qu1">
          <text class="xh">续航</text>

          <br>
          <text class="km"> {{bikeDetails.extensionMileage}}km</text>
          <div v-if="bikeDetails.batteryLevel > 30">
            <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/dianliang_100.png" class="img4"/>
            <text class="status">电量充沛</text>
          </div>
          <div v-else>
            <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/dianliang_20.png" class="img4"/>
            <text class="status" style="color: #FF4E57;">电量偏低，动力有所下降</text>
          </div>
          <button class="btn pass open" @click="makeOrder()">开锁启动</button>
        </div>

      </div>

    </div>
    <div v-else>
      <div class="details">
        <text class="text2">需在
          <text class="blue">还车区域</text>
          内还车
        </text>
        <br>
        <text class="text2 text3">否则会产生车辆调度费</text>
      </div>
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/img1_2.jpg" class="img5"/>
      <div class="view">
        <div class="flex1 qu1">
          <text class="xh">续航</text>
          <br>
          <text class="km"> {{bikeDetails.extensionMileage}}km</text>
          <div v-if="bikeDetails.batteryLevel > 30">
            <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/dianliang_100.png" class="img4"/>
            <text class="status">电量充沛</text>
          </div>
          <div v-else>
            <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/dianliang_20.png" class="img4"/>
            <text class="status" style="color: #FF4E57;">电量偏低，动力有所下降</text>
          </div>
          <button class="btn pass open" @click="makeOrder()" :disabled="disable">开锁启动</button>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {
    data() {
      return {
        bikeDetails: {},
        alertType:null,
        disable:false
      }
    },
    onLoad(options) {
      this.bikeDetails = JSON.parse(options.bikeDetails);
      this.alertType = this.bikeDetails.alertType  //1,"禁行区内车辆" 2,"半价车"  3,"普通车"
    },
    methods: {
      makeOrder() {
        this.disable= true
        let data = {
          bikeId: this.bikeDetails.bikeId,
          orderType: '2'
        }
        let _this = this
        setTimeout(() => {
          _this.disable= false
        },2000)
        Service.makeOrder(data).then((res) => {
//          this.disable= false
          if (res.code == 200) {
            if (res.data.orderStatus == 200) {
              wx.setStorageSync('noProhibit1', '');
              wx.setStorageSync('noProhibit2', '');
              wx.setStorageSync('noProhibit3', '');
              wx.setStorageSync('noProhibit4', '');
              wx.showToast({
                title: '开锁成功',
                icon: 'success',
                duration: 2000
              });
              setTimeout(() => {
                wx.reLaunch({
                  url: '../inUse/main?orderNo=' + res.data.orderNo +'&operateAreaId='+res.data.operateAreaId
                })
              },200)

            } else if (res.data.orderStatus == 300) {
              wx.reLaunch({
                url: '../waitPay/main?autoPay=1&orderNo='+res.data.orderNo
              })
            }
          } else if (res.code == 404 || res.code == 416 || res.code == 417 || res.code == 418) {
            setTimeout(() => {
              wx.redirectTo({
                url: `../deposit/main`
              })
            },2000)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .details {
    padding: 53px 0 10px 50px;
  }

  .view {
    padding: 50px;
    text-align: center;
  }

  .img5 {
    width: 100%;
    height: 350px;
    margin: 0;
  }

  .text3 {
    font-size: 36px;
  }

  .img4 {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
    margin-right: 20 rpx;
  }

  .qu1 {
    padding: 60px 115px 18px 115px;
    background: rgba(255, 255, 255, 1);
    border-radius: 20px;
    border: 2px solid rgba(221, 221, 221, 1);
    flex-direction: column;
  }

  .qu1 .xh {
    margin-bottom: 10px;
    line-height: 40px;
    font-size: 28px;
    color: #999;
  }

  .qu1 .km {
    margin-bottom: 30px;
    line-height: 78px;
    font-size: 56px;
    color: #333;
  }

  .qu1 .status {
    padding-left: 8px;
    font-size: 28px;
    color: #2C9D23;
  }

  .open {
    width: 100%;
    height: 110px;
    line-height: 110px;
    border-radius: 55px;
    font-size: 32px;
  }


</style>
